<template>
  <div>
    <div @click="applynewadd()">
      <slot><el-button type="primary">添加权限</el-button></slot>
    </div>
    <MyDialog
      :title="editId ? '编辑权限' : '添加权限'"
      :visible.sync="addSwitch"
      size="large"
      @beforeClose="close_add"
    >
      <el-form
        ref="khadd"
        :model="queryParam"
        :rules="ywkrules"
        label-width="110px"
        class="demo-ruleForm"
      >
        <div style="padding: 23px 0px 0 0px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="权限名:" prop="auth_name">
                <el-input
                  v-model="queryParam.auth_name"
                  maxlength="10"
                  style="width: 100%"
                  show-word-limit
                  clearable
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="权限:" prop="men_id">
                <el-cascader
                  ref="http_pathRef"
                  v-model="queryParam.men_id"
                  style="width: 100%"
                  :options="menu_list"
                  :props="{
                    multiple: true,
                    emitPath: false,
                    checkStrictly: true,
                    value: 'id',
                    label: 'name',
                  }"
                  clearable
                  @change="changeHttp"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="描述:" prop="auth_desc">
                <el-input
                  v-model="queryParam.auth_desc"
                  style="width: 100%"
                  show-word-limit
                  clearable
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="submit_apply">保 存</el-button>
        <el-button @click="close_add">取 消</el-button>
      </template>
    </MyDialog>
  </div>
</template>
<script>
  import MyDialog from '@/components/Dialog'
  import {
    addPermission,
    permissionDetail,
    editPermission,
    allMenu,
  } from '@/api/admin.js'
  export default {
    components: {
      MyDialog,
    },
    data() {
      return {
        queryParam: {
          men_id: '',
          auth_name: '',
          auth_desc: '',
        },
        menu_list: [
          { id: 1, name: '增加' },
          { id: -1, name: '减少' },
        ],
        addSwitch: false,
        loading: false,
        uploadList: false,
        ywkrules: {
          auth_desc: [
            { required: true, message: '请填写描述', trigger: 'blur' },
          ],
          men_id: [
            { required: true, message: '请选择权限', trigger: 'change' },
          ],
          auth_name: [
            { required: true, message: '请填写名称', trigger: 'blur' },
          ],
        },
        editId: '',
        oldHttp: '',
      }
    },
    computed: {
      queryParams() {
        return JSON.parse(JSON.stringify(this.queryParam))
      },
    },
    watch: {
      queryParams: {
        handler(val, old) {
          // console.log('新的', val, old)
          //change先触发所以获取新的
          this.oldHttp = val.men_id
        },
        deep: true,
      },
    },
    created() {
      this.getAllMenu()
    },
    methods: {
      async getAllMenu() {
        let data = await allMenu()
        if (data.code == 1) {
          this.menu_list = data.data
        }
      },
      applynewadd(item) {
        this.addSwitch = true
        this.uploadList = false
        this.editId = ''
        if (item) {
          // 编辑
          this.editId = item.id
          let { menu_list, auth_name, auth_desc } = item
          let queryParam = {
            men_id: menu_list.map((item) => item.menu_id),
            auth_name,
            auth_desc,
          }
          this.$nextTick(() => {
            Object.assign(this.queryParam, queryParam)
          })
        }
      },
      async getDetail(id) {
        let params = { id }
        let data = await permissionDetail(params)
        if (data.code == 0) {
          let { men_id, auth_name, auth_desc } = data.data
          let queryParam = {
            men_id: men_id,
            auth_name,
            auth_desc,
          }
          Object.assign(this.queryParam, queryParam)
        }
      },
      submit_apply() {
        this.$refs['khadd'].validate(async (valid) => {
          if (valid) {
            this.$confirm('是否继续此操作?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
              .then(async () => {
                this.loading = true
                let params = { ...this.queryParam }
                params.men_id = params.men_id.join(',')
                let data
                if (this.editId) {
                  params.id = this.editId
                  data = await editPermission(params)
                } else {
                  data = await addPermission(params)
                }
                if (data.code == 1) {
                  this.$baseMessage('操作成功', 'success')
                  this.uploadList = true
                  setTimeout(() => {
                    this.close_add()
                  }, 500)
                }
                this.loading = false
              })
              .catch(() => {})
          } else {
            return false
          }
        })
      },
      close_add() {
        this.$refs['khadd'].resetFields()
        this.$nextTick(() => {
          this.$emit('close', this.uploadList)
          this.addSwitch = false
        })
      },
      changeHttp(e) {
        // 新旧对比拿到点击的id,当为选中且为父id时，选中全部子级需判断是否已有
        // console.log('当前', e, this.oldHttp)
        // if (e && e.length) {
        //   let activeId = e.find((item) => !this.oldHttp.includes(item))
        //   console.log('当前', activeId)
        // }
      },
    },
  }
</script>
<style scoped lang="scss">
  .upload-box {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #c0ccda;
    cursor: pointer;
  }
  .live-style-item {
    float: right;
    color: #8492a6;
    font-size: 13px;
    max-width: 200px;
  }

  .bind-box {
    padding: 0 0 20px;
  }

  .bind-box-table {
    padding: 0 0 20px;
  }

  .footer {
    text-align: center;
    padding: 10px 0 45px;

    & > :nth-child(n + 2) {
      margin-left: 14px;
    }

    button {
      width: 106px;
      height: 48px;
    }
  }
</style>
